<template>
  <!-- 轮播配置页面 -->
  <div>
    <!-- 顶部按钮 -->
    <div class="btn">
      <!-- 添加 -->
      <el-button type="primary" @click="addCarousel">添加</el-button>
      <!-- 预览 -->
      <el-button type="primary" @click="showCarousel">预览</el-button>
      <!-- <p v-for="(img, key, index) in imgStatus" :key="index">
        {{ img.url }}
      </p> -->
    </div>
    <!-- 展示数据 -->
    <div class="showData">
      <el-table :data="carouselData">
        <el-table-column type="index" size="mini" align="center" label="序号">
        </el-table-column>
        <el-table-column
          prop="name"
          size="mini"
          align="center"
          label="轮播图名称"
        >
        </el-table-column>
        <el-table-column
          prop="introduce"
          size="mini"
          align="center"
          label="轮播图描述"
        >
        </el-table-column>
        <el-table-column size="mini" align="center" label="轮播图图片">
          <template slot-scope="scope">
            <el-tooltip placement="right-end" effect="light">
              <div slot="content">
                <img :src="scope.row.url" width="150px" />
              </div>
              <img :src="scope.row.url" width="20%" height="20%" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="status" size="mini" align="center" label="状态">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == '正常'"
              type="primary"
              plain
              size="mini"
              >正常</el-button
            >
            <el-button v-else type="danger" size="mini" plain>停用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" size="mini" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editCarousel(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              style="color: red"
              @click="carouselDelete(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.status == '正常'"
              size="mini"
              type="text"
              style="color: gray"
              @click="carouselOff(scope.row)"
              >停用</el-button
            >
            <el-button
              v-else
              size="mini"
              type="text"
              style="color: blue"
              @click="carouselOn(scope.row)"
              >启用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <div class="dialogShow">
      <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
        <el-form
          :model="carouselForm"
          :rules="rules"
          ref="carousel_form"
          label-width="100px"
        >
          <!--  轮播图名称  -->
          <el-form-item label="轮播图名称" prop="name">
            <el-input v-model="carouselForm.name"></el-input>
          </el-form-item>
          <!-- 图片 -->
          <el-form-item label="图片" prop="url">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              v-model="carouselForm.url"
            >
              <img v-if="imageUrl" :src="carouselForm.url" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!-- 描述 -->
          <el-form-item label="描述" prop="introduce">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              v-model="carouselForm.introduce"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submitCarousel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 图片展示框 -->
    <div class="imgShow">
      <el-dialog title="大图预览" :visible.sync="dialogVisibleImg" width="60%">
        <div class="imgShow_dialog">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item
              v-for="(img, key, index) in imgStatus"
              :key="index"
            >
              <img :src="img.url" width="100%" height="100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="offP">
          <el-button type="primary" @click="dialogVisibleImg = false"
            >关闭</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { showFileURL, uploadFileURL } from "@/utils/config";
import { post, get } from "@/utils/request";
export default {
  data() {
    return {
      //轮播图展示数据
      carouselData: [],
      //模态框数据
      //标题
      title: "",
      //模态框显示
      dialogVisible: false,
      //表单信息
      carouselForm: { name: "", url: "", introduce: "" },
      //模态框验证规则
      rules: {
        name: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
        url: [{ required: true, message: "请选择图片", trigger: "blur" }],
      },
      //图片上传
      uploadFileURL,
      imageUrl: "",
      //预览
      dialogVisibleImg: false,
      //正常状态
      statusN: { status: "正常" },
      //接受正常图片数组
      imgStatus: [],
    };
  },
  computed: {},
  methods: {
    //获取数据
    async getCarouselData() {
      let res = await get("/carousel/findAll", {});
      this.carouselData = res.data;
    },
    //停用
    async carouselOff(row) {
      // let res = await get("/carousel/query", { status });
      // console.log(res.data);
      // console.log(row);
      // console.log(row.id);
      // console.log(row.name);
      // console.log(row.introduce);
      // console.log(row.url);
      // console.log(row.status);
      let data = {
        id: row.id,
        name: row.name,
        introduce: row.introduce,
        url: row.url,
        status: "停用",
      };
      // console.log(data);
      let res = await post("/carousel/saveOrUpdate", data);
      // console.log(res);
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCarouselData();
      } else {
        this.$message.error(res.message);
      }
    },
    //启用
    async carouselOn(row) {
      let data = {
        id: row.id,
        name: row.name,
        introduce: row.introduce,
        url: row.url,
        status: "正常",
      };
      let res = await post("/carousel/saveOrUpdate", data);
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCarouselData();
      } else {
        this.$message.error(res.message);
      }
    },
    //删除
    async carouselDelete(id) {
      // console.log(id);
      let res = await get("/carousel/deleteById", { id });

      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCarouselData();
      } else {
        this.$message.warning(res.message);
      }
    },
    //添加按钮
    addCarousel() {
      this.title = "添加轮播图";
      this.dialogVisible = true;
      //清空表单
      this.carouselForm = {};
      //清空图片
      this.imageUrl = "";
    },
    //编辑按钮
    editCarousel(row) {
      //赋值
      this.carouselForm = { ...row };
      //图片预览
      this.imageUrl = this.carouselForm.url;
      this.title = "编辑轮播图";
      this.dialogVisible = true;
    },
    //文件上传
    //上传成功后回调
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //上传成功后 更新imgUrl预览图片地址
      this.carouselForm.url = showFileURL + res.data.id;
    },
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
    //模态框关闭按钮
    dialogClose() {
      // 关闭
      setTimeout(() => {
        //重置
        this.$refs["carousel_form"].resetFields();
        this.dialogVisible = false;
      }, 200);
    },
    //模态框确定
    submitCarousel() {
      this.$refs["carousel_form"].validate(async (valid) => {
        if (valid) {
          //发送表单验证请求 提交表单对象
          let res = await post("/carousel/saveOrUpdate", this.carouselForm);
          //给用户提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            //刷新页码
            this.getCarouselData();
          } else {
            this.$message.error(res.message);
          }
          //调用关闭模态框
          this.dialogClose();
        } else {
        }
      });
    },
    //预览按钮
    showCarousel() {
      this.dialogVisibleImg = true;
      this.getStatusImg();
    },
    //状态为 正常 图片获取
    async getStatusImg() {
      // let data = {
      //   status: "正常",
      // };
      let res = await get("/carousel/query", this.statusN);
      // console.log(res);
      // console.log(res.data);
      this.imgStatus = res.data;
    },
  },
  created() {
    this.getCarouselData();
    //正常图片
    this.getStatusImg();
  },
  mounted() {},
};
</script>
<style scoped>
.imgShow_dialog {
  text-align: center;
}
.offP {
  margin-left: 800px;
  margin-top: 20px;
}
</style>